<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*,com.test.bean.*"%> 
<%@taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path ;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path %>/easyui/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="<%=path %>/easyui/themes/icon.css">   
<script type="text/javascript" src="<%=path %>/easyui/jquery.min.js"></script>   
<script type="text/javascript" src="<%=path %>/easyui/jquery.easyui.min.js"></script> 
<title>Insert title here</title>
<script>
//退出
function logout()
{
	var url = "<%=path %>/login.jsp";
	window.open(url,'_self');
}
//定义Datagrid单元格显示,将文本显示为按钮
function formatOper(val,row,index){
    return '<input type="button" onclick="editBook('+index+')" value="修改"></input>&nbsp;'+
    	'<input type="button" onclick="delBook('+index+')" value="删除"></input>';  
}
//修改图书
function editBook(val)
{
	var rows = $('#dg').datagrid('getRows');
	var selRow = rows[val];
	$('#wid').val(selRow.id);
	$('#wname').textbox('setValue',selRow.name);
	$('#wauthor').textbox('setValue',selRow.author);
	$("input[name='wcatagory']").each(function(){ 
		if($(this).val() == selRow.catagory)
			$(this).attr("checked",true);
		else
			$(this).attr("checked",false);
	});
	$('#win').window('open');
}
//添加新图书,图书ID置空
function addNewBook()
{
	$("#wid").val('');
	$("#wname").textbox('setValue','');
	$("#wauthor").textbox('setValue','');
	$('#win').window('open');
}
//删除图书操作
function delBook(val)
{
	var rows = $('#dg').datagrid('getRows');
	var selRow = rows[val];
	$('#did').val(selRow.id);
	$('#delwin').window('open');
}
//关闭新建,修改窗口
function closewin()
{
	$('#win').window('close');
}
//新建,修改窗口上保存按钮操作
function savewin()
{
	var aa='';
	$("input[name='checkbox']:checkbox:checked").each(function(){ 
		aa+=$(this).val()+','; 
	});
	var name = $("#name").val();
	
	var arr = $('#modfrm').serialize();
	$.ajax({  
        url : '<%=path %>/book/modify',  
        data:arr,
        type:"post",
        success : function(result) {  
        	$('#dg').datagrid({   
        	    url:'/book/query?catagory='+aa+'&name='+name 
        	});
        }  
    }); 	
	$('#win').window('close');
}
//删除窗口上,确定按钮的操作
function savedelwin()
{
	var aa='';
	$("input[name='checkbox']:checkbox:checked").each(function(){ 
		aa+=$(this).val()+','; 
	});
	var name = $("#name").val();
	
	var arr = $('#delfrm').serialize();
	$.ajax({  
        url : '<%=path %>/book/delete',  
        data:arr,
        type:"post",
        success : function(result) {  
        	$('#dg').datagrid({   
        	    url:'/book/query?catagory='+aa+'&name='+name 
        	});
        }  
    }); 	
	$('#delwin').window('close');
}
//关闭删除窗口
function closedelwin()
{
	$('#delwin').window('close');
}
//根据图书类别和图书名称查询并装载Datagrid控件
function query()
{
	var aa='';
	$("input[name='checkbox']:checkbox:checked").each(function(){ 
		aa+=$(this).val()+','; 
	});
	var name = $("#name").val();
	$('#dg').datagrid({   
	    url:'<%=path %>/book/query?catagory='+aa+'&name='+name 
	}); 
}

$(document).ready(function(){
	//Dom准备就绪时,关闭两个模态窗口
	$('#win').window('close');
	$('#delwin').window('close');

});
</script>
</head>
<body>
<input type="button" value="退出" onclick="logout()"/>

<form id="queryForm" method="post">
	<div style="margin-bottom:20px">
		<label>类别:</label>
		 <input type="checkbox" name="checkbox" value="科技" onclick="query()">科技
		 <input type="checkbox" name="checkbox" value="哲学" onclick="query()">哲学
		 <input type="checkbox" name="checkbox" value="音乐" onclick="query()">音乐
	</div>
	<div style="margin-bottom:20px">
		<input class="easyui-textbox" id="name" name="name" style="width:100" data-options="label:'关键字:'">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="query()" style="width:80px">查询</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addNewBook()" style="width:80px">新增图书</a>
	</div>
</form>

<table id="dg" title="图书信息" class="easyui-datagrid"  
            url="<%=path %>/book/query"  
            toolbar="#toolbar" pagination="true" pageList="[4]" pageSize="4"
            rownumbers="false" fitColumns="true" singleSelect="true">  
        <thead>  
            <tr>  
                <th data-options="field:'id',sortable:true,width:20">图书ID</th>  
                <th data-options="field:'name',width:20">图书名</th>  
                <th data-options="field:'catagory',width:20">类别</th>  
                <th data-options="field:'author',width:20">作者</th>
                <th data-options="field:'cnt',width:20">喜欢程度</th>  
                <th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>  
            </tr>
        </thead>  
</table> 

<div id="win" class="easyui-window" title="修改图书" style="width:400px;height:240px;"   
        data-options="iconCls:'icon-save',modal:true">   
		<br>
		<form id="modfrm" method="post" action="<%=path %>/boot/modify">
			<div style="margin-left:20px;margin-bottom:20px">
				<input type="hidden" id="wid" name="wid" value="">
				<input class="easyui-textbox" id="wname" name="wname" value="" style="width:70%" data-options="label:'图书名:'">
			</div>
			<div style="margin-left:20px;margin-bottom:20px">
				<input id="certType" type="radio" name="wcatagory"
					class="easyui-validatebox" checked="checked" value="科技"><label>科技</label></input>
				<input id="certType" type="radio" name="wcatagory"
					class="easyui-validatebox" value="哲学"><label>哲学</label></input>
				<input id="certType" type="radio" name="wcatagory"
					class="easyui-validatebox" value="音乐"><label>音乐</label></input>
			</div>
			<div style="margin-left:20px;margin-bottom:20px">
				<input class="easyui-textbox" id="wauthor" name="wauthor" style="width:70%" data-options="label:'作者:'">
			</div>
		</form>
		<div style="text-align:center;padding:5px 0">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="savewin()" style="width:80px">确定</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="closewin()" style="width:80px">关闭</a>
		</div>
</div>

<div id="delwin" class="easyui-window" title="删除图书" style="width:400px;height:240px;"   
        data-options="iconCls:'icon-save',modal:true">   
		<br>
		<form id="delfrm" method="post" action="<%=path %>/boot/delete">
			<input type="hidden" id="did" name="did" value="">
			<div style="margin-left:20px;margin-bottom:20px">
				是否删除这本图书
			</div>
		
			<div style="text-align:center;padding:5px 0">
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="savedelwin()" style="width:80px">确定</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="closedelwin()" style="width:80px">关闭</a>
			</div>
		</form>
</div>
</body>
</html>